import React, { Component } from 'react';
import { Input, Grid, Select, Button, DatePicker } from '@icedesign/base';

// form binder 详细用法请参见官方文档
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;
const { Option } = Select;
const { MonthPicker, YearPicker, RangePicker } = DatePicker;
export default class Filter extends Component {
  static displayName = 'Filter';

  render() {
    return (
      <IceFormBinderWrapper
        value={this.props.value}
        onChange={this.props.onChange}
      >
        <div>
          <Row wrap>
            <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
              <label style={styles.filterTitle}>所属单位</label>
              <IceFormBinder>
                <Input name="department" />
              </IceFormBinder>
            </Col>
            {/*<Col xxs={24} xs={12} l={8} style={styles.filterCol}>*/}
              {/*<label style={styles.filterTitle}>额外参数</label>*/}
              {/*<IceFormBinder>*/}
                {/*<Input name="tag" />*/}
              {/*</IceFormBinder>*/}
            {/*</Col>*/}

            <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
              <label style={styles.filterTitle}>起止日期</label>
              <IceFormBinder
                name="date"
                valueFormatter={(date, dateStr) => {
                  return dateStr;
                }}
              >
                <RangePicker
                  onChange={(val, str) => console.log(str)}
                // onStartChange={(val, str) => console.log(val, str)}
                  name="date"
                />
              </IceFormBinder>
            </Col>
          </Row>
          <div
            style={{
              textAlign: 'left',
              marginLeft: '12px',
            }}
          >
            <Button onClick={this.props.onReset} type="normal">
              重置
            </Button>
            <Button
              onClick={this.props.onSubmit}
              type="primary"
              style={{ marginLeft: '10px' }}
            >
              确定
            </Button>
          </div>
        </div>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  filterCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },

  filterTitle: {
    width: '68px',
    textAlign: 'right',
    marginRight: '12px',
    fontSize: '14px',
  },

  filterTool: {
    width: '200px',
  },
};
